export default {

  /*
   * 使用：(注意使用前需要调整元素的position)
   * 1.只需要简单的拖动 绑定v-drag即可
   * 2.需要在父容器内拖动  传入limit:true即可
   * 3.需要在数据变化时回到原位置  传入origin:[leftpos,toppos]即可
   * 4.只需要简单的拖动,但是需要指定拖动区域,需要传入该区域的id  effectAreaId:'xx'
   */

  bind(el, binding, vnode) {
    //在这里进行一些初始化设置，只调用一次
    //如果需要钩子通讯请使用 el.dataset
    //切记 参数中除了el，其他参数binding, vnode, oldVnode 都是只读的请不要修改
  },
  inserted(el, binding, vnode) {
    //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    //使用 addEventListener 和 removeEventListener 来避免对已绑定的同种事件产生干扰
    let
      top,
      left,
      ofstx,
      ofsty,
      w,
      h,
      pw,
      ph
    let tempEvent1 = function(e) {
      function valid(e, a, b) {
        if (e < 0) {
          return 0
        } else if (e > a - b) {
          return a - b
        }
        return e
      }
      el.style.left = valid(e.pageX - left - ofstx, pw, w) + 'px'
      el.style.top = valid(e.pageY - top - ofsty, ph, h) + 'px'
    }
    let tempEvent2 = function(e) {
      el.style.left = e.pageX - ofstx + 'px'
      el.style.top = e.pageY - ofsty + 'px'
    }
    if (binding.value && binding.value.limit) { //开启父容器范围内拖拽
      el.addEventListener('mousedown', function(e) {
        top = el.parentNode.getBoundingClientRect().top
        left = el.parentNode.getBoundingClientRect().left
        ofstx = e.layerX
        ofsty = e.layerY
        w = el.clientWidth
        h = el.clientHeight
        pw = el.parentNode.clientWidth
        ph = el.parentNode.clientHeight
        document.addEventListener('mousemove', tempEvent1, false)
      }, false)
      document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', tempEvent1, false)
      }, false)
    } else {
      //不受限制的拖动   
      function effectDom() {
        return binding.value && binding.value.effectAreaId ? document.getElementById(binding.value.effectAreaId) : el
      }
      effectDom().addEventListener('mousedown', function(e) {
        ofstx = e.layerX
        ofsty = e.layerY
        document.addEventListener('mousemove', tempEvent2, false) //false是冒泡  true是捕获
      }, false)
      document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', tempEvent2, false)
      }, false)
    }
  },
  update(el, binding, vnode, oldVnode) {
    /*
    所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
    指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
    */

    //在一些操作时使其恢复原位置
    if (binding.value && binding.value.origin) {
      el.style.top = binding.value.origin[1]
      el.style.left = binding.value.origin[0]
    }
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    /*
    指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    */

  }
}
